<template>
  <el-card class="form-container" shadow="never">
    <form-detail
      v-show="showStatus[0]"
      v-model="skuForm"
      :is-edit="isEdit"
      @finishCommit="finishCommit"
    >
    </form-detail>
  </el-card>
</template>
<script>
import FormDetail from "./FormDetail.vue";
import { fetchCreateCoupon } from "@/api/ams";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";

dayjs.extend(utc);

const defaultProductParam = {
  batchNumber: undefined,
  couponBeginTime: null,
  couponEndTime: null,
  couponName: "",
  couponType: undefined,
  productId: undefined,
  remark: "",
  termBeginTime: undefined,
  termDays: 0,
  termEndTime: undefined,
  peperiodValidity: [],
  organizationId: 1,
};
export default {
  name: "ProductDetail",
  components: {
    FormDetail,
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      active: 0,
      skuForm: Object.assign({}, defaultProductParam),
      showStatus: [true, false, false, false],
    };
  },
  created() {},
  methods: {
    finishCommit(isEdit) {
      this.$confirm("是否要提交该优惠券", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const { periodValidity, ...rest } = this.skuForm;
        if (isEdit) {
        } else {
          fetchCreateCoupon({
            ...rest,
            couponBeginTime: dayjs(periodValidity[0]).utc().toISOString(),
            couponEndTime: dayjs(periodValidity[1]).utc().toISOString(),
            termBeginTime: dayjs(periodValidity[0]).utc().toISOString(),
            termEndTime: dayjs(periodValidity[1]).utc().toISOString(),
            termDays: Math.ceil(
              (new Date(periodValidity[1]) - new Date(periodValidity[0])) /
                (1000 * 60 * 60 * 24),
            ), // 计算天数, // 计算天数
          }).then(() => {
            this.$message({
              type: "success",
              message: "提交成功",
              duration: 1000,
            });
            this.$router.back();
          });
        }
      });
    },
  },
};
</script>
<style>
.form-container {
  width: 960px;
}

.form-inner-container {
  width: 800px;
}
</style>
